<template>
  <div class="interview-simulator">
    <div class="simulator-header">
      <h2>AI面试模拟</h2>
      <p>基于您的职业目标，进行个性化的面试模拟训练</p>
    </div>

    <div class="simulator-content">
      <!-- 面试设置 -->
      <div v-if="step === 'setup'" class="setup-section">
        <h3>面试设置</h3>
        <el-form :model="interviewSettings" label-width="120px">
          <el-form-item label="面试类型">
            <el-select v-model="interviewSettings.type" placeholder="请选择面试类型">
              <el-option label="技术面试" value="technical" />
              <el-option label="架构师面试" value="architect" />
              <el-option label="管理面试" value="management" />
              <el-option label="综合面试" value="comprehensive" />
            </el-select>
          </el-form-item>
          <el-form-item label="难度级别">
            <el-select v-model="interviewSettings.level" placeholder="请选择难度级别">
              <el-option label="初级" value="junior" />
              <el-option label="中级" value="middle" />
              <el-option label="高级" value="senior" />
              <el-option label="专家" value="expert" />
            </el-select>
          </el-form-item>
          <el-form-item label="面试时长">
            <el-select v-model="interviewSettings.duration" placeholder="请选择面试时长">
              <el-option label="15分钟" value="15" />
              <el-option label="30分钟" value="30" />
              <el-option label="45分钟" value="45" />
              <el-option label="60分钟" value="60" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="startInterview">开始面试</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 面试进行中 -->
      <div v-if="step === 'interview'" class="interview-section">
        <div class="interview-header">
          <div class="interview-info">
            <h3>{{ interviewSettings.type }}面试</h3>
            <p>难度：{{ interviewSettings.level }} | 剩余时间：{{ remainingTime }}分钟</p>
          </div>
          <div class="interview-controls">
            <el-button @click="pauseInterview">暂停</el-button>
            <el-button type="danger" @click="endInterview">结束面试</el-button>
          </div>
        </div>

        <div class="interview-content">
          <div class="question-area">
            <div class="current-question">
              <h4>当前问题：</h4>
              <p>{{ currentQuestion.content }}</p>
              <div class="question-tips" v-if="currentQuestion.tips">
                <el-alert
                  title="提示"
                  type="info"
                  :description="currentQuestion.tips"
                  show-icon
                />
              </div>
            </div>
          </div>

          <div class="answer-area">
            <el-input
              v-model="currentAnswer"
              type="textarea"
              :rows="4"
              placeholder="请输入您的回答..."
            />
            <div class="answer-actions">
              <el-button @click="skipQuestion">跳过</el-button>
              <el-button type="primary" @click="submitAnswer">提交答案</el-button>
            </div>
          </div>

          <div class="interview-progress">
            <el-progress 
              :percentage="progressPercentage"
              :format="format"
            />
            <p>已完成 {{ answeredQuestions }}/{{ totalQuestions }} 题</p>
          </div>
        </div>
      </div>

      <!-- 面试结果 -->
      <div v-if="step === 'result'" class="result-section">
        <h3>面试评估报告</h3>
        
        <div class="score-overview">
          <el-row :gutter="20">
            <el-col :span="8" v-for="score in scoreDetails" :key="score.category">
              <el-card class="score-card">
                <h4>{{ score.category }}</h4>
                <div class="score-value">{{ score.value }}/{{ score.total }}</div>
                <el-progress 
                  :percentage="(score.value / score.total) * 100"
                  :color="getScoreColor(score.value / score.total)"
                />
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div class="answer-review">
          <h4>回答回顾</h4>
          <el-collapse>
            <el-collapse-item 
              v-for="(qa, index) in questionAnswers" 
              :key="index"
              :title="'问题 ' + (index + 1)"
            >
              <div class="qa-content">
                <p><strong>问题：</strong>{{ qa.question }}</p>
                <p><strong>您的回答：</strong>{{ qa.answer }}</p>
                <p><strong>参考答案：</strong>{{ qa.reference }}</p>
                <div class="qa-feedback">
                  <el-tag :type="qa.score >= 7 ? 'success' : qa.score >= 5 ? 'warning' : 'danger'">
                    得分：{{ qa.score }}/10
                  </el-tag>
                  <p><strong>评价：</strong>{{ qa.feedback }}</p>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>

        <div class="improvement-suggestions">
          <h4>改进建议</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(suggestion, index) in improvementSuggestions"
              :key="index"
              :type="suggestion.type"
            >
              {{ suggestion.content }}
            </el-timeline-item>
          </el-timeline>
        </div>

        <div class="result-actions">
          <el-button @click="retryInterview">重新面试</el-button>
          <el-button type="primary" @click="downloadReport">下载报告</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const step = ref('setup')
const interviewSettings = ref({
  type: '',
  level: '',
  duration: '30'
})

// 面试状态
const currentQuestion = ref({
  content: '请详细描述一下Vue3的响应式系统是如何工作的？',
  tips: '可以从Proxy、依赖收集、响应式原理等方面回答'
})
const currentAnswer = ref('')
const remainingTime = ref(30)
const answeredQuestions = ref(0)
const totalQuestions = ref(10)

// 面试结果
const scoreDetails = ref([
  { category: '技术能力', value: 8, total: 10 },
  { category: '问题理解', value: 7, total: 10 },
  { category: '表达清晰度', value: 9, total: 10 }
])

const questionAnswers = ref([
  {
    question: '请详细描述一下Vue3的响应式系统是如何工作的？',
    answer: 'Vue3使用Proxy代替了Vue2的Object.defineProperty...',
    reference: 'Vue3的响应式系统主要基于Proxy实现，通过创建代理对象来拦截属性的访问和修改操作...',
    score: 8,
    feedback: '回答比较全面，但对依赖收集的机制描述不够详细'
  }
])

const improvementSuggestions = ref([
  {
    type: 'success',
    content: '继续保持对技术原理的深入理解'
  },
  {
    type: 'warning',
    content: '建议多练习表达，使回答更加简洁清晰'
  },
  {
    type: 'info',
    content: '可以多关注一些实际项目中的应用场景'
  }
])

const progressPercentage = computed(() => {
  return (answeredQuestions.value / totalQuestions.value) * 100
})

const format = (percentage) => {
  return percentage === 100 ? '完成' : `${percentage}%`
}

const getScoreColor = (score) => {
  if (score >= 0.8) return '#67C23A'
  if (score >= 0.6) return '#E6A23C'
  return '#F56C6C'
}

const startInterview = () => {
  if (!interviewSettings.value.type || !interviewSettings.value.level) {
    ElMessage.warning('请完善面试设置')
    return
  }
  step.value = 'interview'
  // 这里可以调用后端API获取面试题目
}

const pauseInterview = () => {
  // 实现暂停功能
}

const endInterview = () => {
  step.value = 'result'
  // 这里可以调用后端API生成面试报告
}

const submitAnswer = () => {
  if (!currentAnswer.value.trim()) {
    ElMessage.warning('请输入您的回答')
    return
  }
  // 这里可以调用后端API评估答案
  answeredQuestions.value++
  currentAnswer.value = ''
  // 获取下一个问题
}

const skipQuestion = () => {
  answeredQuestions.value++
  // 获取下一个问题
}

const retryInterview = () => {
  step.value = 'setup'
  interviewSettings.value = {
    type: '',
    level: '',
    duration: '30'
  }
  currentAnswer.value = ''
  answeredQuestions.value = 0
}

const downloadReport = () => {
  // 实现报告下载功能
  ElMessage.success('报告下载成功')
}
</script>

<style scoped>
.interview-simulator {
  padding: 20px;
}

.simulator-header {
  text-align: center;
  margin-bottom: 30px;
}

.simulator-header h2 {
  margin-bottom: 10px;
  color: #303133;
}

.simulator-header p {
  color: #606266;
}

.setup-section {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.interview-section {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.interview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.question-area {
  margin-bottom: 20px;
}

.question-tips {
  margin-top: 10px;
}

.answer-area {
  margin-bottom: 20px;
}

.answer-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.interview-progress {
  margin-top: 20px;
}

.result-section {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.score-card {
  text-align: center;
  margin-bottom: 20px;
}

.score-value {
  font-size: 24px;
  color: #409EFF;
  margin: 10px 0;
}

.qa-content {
  padding: 10px;
}

.qa-feedback {
  margin-top: 10px;
}

.improvement-suggestions {
  margin-top: 30px;
}

.result-actions {
  margin-top: 20px;
  text-align: center;
}
</style> 